Reactã®å®éšçAPIã§ããexperimental_Offscreenã«ãããªãã¹ã¯ãªãŒã³ã¬ã³ããªã³ã°ãæ¢æ±ããŸããããã©ãŒãã³ã¹ã®åäžããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã®æé©åããããŠReactã¢ããªã±ãŒã·ã§ã³ã§ã®ã¹ã ãŒãºãªãã©ã³ãžã·ã§ã³äœææ¹æ³ãåŠã³ãŸãããã
ããã©ãŒãã³ã¹ãè§£ãæŸã€ïŒReact experimental_Offscreenã®åŸ¹åºè§£èª¬
ãŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ãæ§ç¯ããããã®åŒ·åãªJavaScriptã©ã€ãã©ãªã§ããReactã¯ãçŸä»£ã®Webã¢ããªã±ãŒã·ã§ã³ã®èŠæ±ã«å¿ããããã«çµ¶ããé²åããŠããŸããæè¿ã®ããããŠéåžžã«æåŸ
ãããŠããå®éšçæ©èœã®äžã€ãexperimental_Offscreen APIã§ãããã®æ©èœã¯ããªãã¹ã¯ãªãŒã³ã¬ã³ããªã³ã°ãå¯èœã«ããããšã§ã倧å¹
ãªããã©ãŒãã³ã¹åäžãçŽæããŸãããã®å
æ¬çãªã¬ã€ãã§ã¯ããªãã¹ã¯ãªãŒã³ã¬ã³ããªã³ã°ã®æŠå¿µãæ¢æ±ããexperimental_Offscreenãã©ã®ããã«æ©èœããããçè§£ããReactã¢ããªã±ãŒã·ã§ã³ã匷åããããã«ãããæŽ»çšããæ¹æ³ã宿ŒããŸãã
ãªãã¹ã¯ãªãŒã³ã¬ã³ããªã³ã°ãšã¯ïŒ
ãªãã¹ã¯ãªãŒã³ã¬ã³ããªã³ã°ãšã¯ãæ¬è³ªçã«ãã³ã³ããŒãã³ããã¢ããªã±ãŒã·ã§ã³ã®äžéšãç»é¢ã«ããã«è¡šç€ºããããšãªããããã¯ã°ã©ãŠã³ãã§ã¬ã³ããªã³ã°ããããšãå¯èœã«ããæè¡ã§ãããã©ãŠã¶ã¯ã³ã³ããŒãã³ããä»®æ³ãããã¡ã«ã¬ã³ããªã³ã°ãããã®ã³ã³ããŒãã³ããå¿ èŠã«ãªã£ããšãã«ãåã¬ã³ããªã³ã°ã®ã³ã¹ãããããã«è¿ éã«è¡šç€ºã§ããŸãããã®æè¡ã¯ç¹ã«æ¬¡ã®ãããªå Žåã«åœ¹ç«ã¡ãŸãïŒ
- ã³ã³ãã³ãã®äºåã¬ã³ããªã³ã°ïŒ ãŠãŒã¶ãŒãã³ã³ããŒãã³ãã«ããã²ãŒããããšãã«ããã«è¡šç€ºã§ãããããäºåã«ã¬ã³ããªã³ã°ããŠãããŸãã
- ãã©ã³ãžã·ã§ã³ã®æ¹åïŒ çŸåšã®ç»é¢ã衚瀺ãããŠããéã«æ¬¡ã®ç»é¢ãäºåã¬ã³ããªã³ã°ããããšã§ãããã¹ã ãŒãºãªãã©ã³ãžã·ã§ã³ãäœæããŸãã
- åæããŒãæéã®æé©åïŒ éèŠã§ãªãã³ã³ãã³ãã®ã¬ã³ããªã³ã°ãé å»¶ãããããšã§ãã¢ããªã±ãŒã·ã§ã³ã®åæããŒãæéãæ¹åããŸãã
ã°ããŒãã«ãªeã³ããŒã¹ãã©ãããã©ãŒã ãæ³åããŠã¿ãŠãã ããããŠãŒã¶ãŒã¯ããŸããŸãªåœã®è£œåãé²èЧããŸãããªãã¹ã¯ãªãŒã³ã¬ã³ããªã³ã°ã䜿çšãããšããŠãŒã¶ãŒã補åãªã¹ããããã²ãŒãããéã«è£œå詳现ããŒãžãããã¯ã°ã©ãŠã³ãã§äºåã¬ã³ããªã³ã°ã§ããç¹å®ã®è£œåãã¯ãªãã¯ãããšãã«ãããéããããã¬ã¹ãã³ã·ããªäœéšãä¿èšŒããŸããããã¯ãã¬ã³ããªã³ã°æéããŠãŒã¶ãŒæºè¶³åºŠã«å€§ãã圱é¿ããå¯èœæ§ããããã€ã³ã¿ãŒãããæ¥ç¶ãé ããŠãŒã¶ãŒã«ãšã£ãŠç¹ã«éèŠã§ãã
React experimental_Offscreenã®ç޹ä»
Reactã®experimental_Offscreen APIã¯ããªãã¹ã¯ãªãŒã³ã¬ã³ããªã³ã°ã宣èšçã«ç®¡çããæ¹æ³ãæäŸããŸããããã«ãããã³ã³ããŒãã³ãã<Offscreen>èŠçŽ ã§ã©ããããã³ã³ããŒãã³ãããã€ãã©ã®ããã«ã¬ã³ããªã³ã°ãããããå¶åŸ¡ã§ããŸããååã瀺ãããã«ããã®APIã¯çŸåšå®éšçãªãã®ã§ãããå°æ¥ã®Reactã®ãªãªãŒã¹ã§å€æŽãããå¯èœæ§ãããããšã«æ³šæããããšãéèŠã§ãããããã£ãŠã泚æããŠäœ¿çšããAPIã®é²åã«åãããŠã³ãŒããé©å¿ãããæºåãããŠããå¿
èŠããããŸãã
experimental_Offscreenã®èåŸã«ããäžå¿çãªååã¯ãã³ã³ããŒãã³ãã®å¯èŠæ§ãå¶åŸ¡ããããšã§ããã³ã³ããŒãã³ãã<Offscreen>ã§ã©ããããããšãæåã¯ããã¯ã°ã©ãŠã³ãã§ã¬ã³ããªã³ã°ãããŸãããã®åŸãmodeããããã£ã䜿çšããŠãã³ã³ããŒãã³ããç»é¢ã«è¡šç€ºãããã¿ã€ãã³ã°ããé衚瀺ã®å Žåã§ãåç¶ãããã¹ããã©ãããå¶åŸ¡ã§ããŸãã
<Offscreen>ã®äž»èŠãªProps
mode: ãã®propã¯<Offscreen>ã³ã³ããŒãã³ãã®ã¬ã³ããªã³ã°åäœã決å®ããŸãã2ã€ã®å¯èœãªå€ãåãå ¥ããŸãïŒ"visible": ã³ã³ããŒãã³ãã¯ã¬ã³ããªã³ã°ãããç»é¢ã«è¡šç€ºãããŸãã"hidden": ã³ã³ããŒãã³ãã¯ããã¯ã°ã©ãŠã³ãã§ã¬ã³ããªã³ã°ãããŸããã衚瀺ã¯ãããŸããããã®ç¶æ ãšDOMæ§é ãä¿æãããŸãŸãåçµããããç¶æ ã«ãªããŸãã
children: ãªãã¹ã¯ãªãŒã³ã§ã¬ã³ããªã³ã°ãããReactã³ã³ããŒãã³ãã
React experimental_Offscreenã®ä»çµã¿
experimental_Offscreenãå
éšã§ã©ã®ããã«æ©èœããããåè§£ããŠã¿ãŸãããïŒ
- åæã¬ã³ããªã³ã°ïŒ ã³ã³ããŒãã³ãã
<Offscreen mode="hidden">ã§ã©ããããããšãReactã¯ããã¯ã°ã©ãŠã³ãã§ã³ã³ããŒãã³ããã¬ã³ããªã³ã°ããŸããããã¯ãã³ã³ããŒãã³ãã®render颿°ãå®è¡ããããã®DOMæ§é ãäœæãããããšãæå³ããŸãããç»é¢ã«ã¯è¡šç€ºãããŸããã - ç¶æ
ã®åçµïŒ
modeã"hidden"ã«èšå®ãããŠããå Žåãã³ã³ããŒãã³ãã®ç¶æ ã¯ä¿æãããŸããããã¯ãã³ã³ããŒãã³ããæåããåã¬ã³ããªã³ã°ããããšãªãè¿ éã«è¡šç€ºã§ãããããéåžžã«éèŠã§ããæ¬¡ã®ãããªã·ããªãªãèããŠã¿ãŠãã ããïŒãŠãŒã¶ãŒãè€æ°ã¹ãããã®ãã©ãŒã ã«å ¥åããŠãããšããŸããããã¹ãããã<Offscreen>ã§ã©ãããããŠé衚瀺ã«ãªã£ãŠããå ŽåããŠãŒã¶ãŒãé¢ããŠããã®ã¹ãããã§å ¥åããããŒã¿ã¯ä¿æãããŸãã - 衚瀺ãžã®é·ç§»ïŒ
modeã"visible"ã«å€æŽããããšãReactã¯äºåã«ã¬ã³ããªã³ã°ãããã³ã³ããŒãã³ããå¹ççã«ç»é¢ã«è¡šç€ºããŸããã³ã³ããŒãã³ãã¯ãã§ã«ããã¯ã°ã©ãŠã³ãã§ã¬ã³ããªã³ã°ãããŠãããããé·ç§»ã¯æåããã¬ã³ããªã³ã°ãããããã¯ããã«é«éã§ã¹ã ãŒãºã§ãã - ã¢ã³ããŠã³ãïŒ
<Offscreen>ã³ã³ããŒãã³ããã¢ã³ããŠã³ããããïŒDOMããåé€ãããïŒãšãReactã¯ãã®åã³ã³ããŒãã³ããã¢ã³ããŠã³ããããããã䜿çšããŠãããªãœãŒã¹ãè§£æŸããŸãã
React experimental_Offscreenã®å®çšäŸ
experimental_Offscreenã®èœåã説æããããã«ãããã€ãã®å®çšçãªäŸãèŠãŠã¿ãŸãããïŒ
1. ã¿ãã³ã³ãã³ãã®äºåã¬ã³ããªã³ã°
ãããããç°ãªãããŒã¿ã»ãããå«ãè€æ°ã®ã¿ããæã€ãŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ãæ³åããŠã¿ãŠãã ãããåæããŒãæã«ãã¹ãŠã®ã¿ãã³ã³ãã³ããã¬ã³ããªã³ã°ããïŒããã¯é
ããªãå¯èœæ§ããããŸãïŒä»£ããã«ãexperimental_Offscreenã䜿çšããŠéã¢ã¯ãã£ããªã¿ãã®ã³ã³ãã³ããããã¯ã°ã©ãŠã³ãã§äºåã¬ã³ããªã³ã°ã§ããŸãã
import React, { useState } from 'react';
import { unstable_Offscreen as Offscreen } from 'react';
function TabContent({ content }) {
return (
<div>
<p>{content}</p>
</div>
);
}
function Tabs() {
const [activeTab, setActiveTab] = useState('tab1');
return (
<div>
<nav>
<button onClick={() => setActiveTab('tab1')}>Tab 1</button>
<button onClick={() => setActiveTab('tab2')}>Tab 2</button>
</nav>
<Offscreen mode={activeTab === 'tab1' ? 'visible' : 'hidden'}>
<TabContent content="Content for Tab 1" />
</Offscreen>
<Offscreen mode={activeTab === 'tab2' ? 'visible' : 'hidden'}>
<TabContent content="Content for Tab 2" />
</Offscreen>
</div>
);
}
export default Tabs;
ãã®äŸã§ã¯ãäž¡æ¹ã®ã¿ãã®ã³ã³ãã³ãã¯æåã«ã¬ã³ããªã³ã°ãããŸãããã¢ã¯ãã£ããªã¿ãã®ã¿ã衚瀺ãããŸãããŠãŒã¶ãŒãã¿ããåãæ¿ãããšãã³ã³ãã³ãã¯ããã¯ã°ã©ãŠã³ãã§äºåã«ã¬ã³ããªã³ã°ãããŠãããããããã«è¡šç€ºãããŸããããã«ãããã¯ããã«ã¹ã ãŒãºã§ã¬ã¹ãã³ã·ããªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãå®çŸããŸãã
2. ã«ãŒã¿ãŒãã©ã³ãžã·ã§ã³ã®æé©å
ãŠãŒã¶ãŒãã¢ããªã±ãŒã·ã§ã³å
ã®ã«ãŒãéãããã²ãŒããããšããæ°ããã«ãŒãã®ã³ã³ãã³ããã¬ã³ããªã³ã°ããããŸã§ã«é¡èãªé
å»¶ãçºçããããšããããŸããexperimental_Offscreenã䜿çšãããšãçŸåšã®ã«ãŒãã衚瀺ãããŠããéã«æ¬¡ã®ã«ãŒããäºåã¬ã³ããªã³ã°ããã·ãŒã ã¬ã¹ãªãã©ã³ãžã·ã§ã³ãäœæã§ããŸãã
import React, { useState, useEffect } from 'react';
import { unstable_Offscreen as Offscreen } from 'react';
function Route({ path, component: Component, isVisible }) {
return (
<Offscreen mode={isVisible ? 'visible' : 'hidden'}>
<Component />
</Offscreen>
);
}
function Router() {
const [currentRoute, setCurrentRoute] = useState('/');
const [nextRoute, setNextRoute] = useState(null);
useEffect(() => {
// Simulate route change
setTimeout(() => {
setNextRoute('/about');
}, 1000);
}, []);
useEffect(() => {
if (nextRoute) {
// Simulate pre-rendering the next route
setTimeout(() => {
setCurrentRoute(nextRoute);
setNextRoute(null);
}, 500);
}
}, [nextRoute]);
return (
<div>
<Route path="/" component={() => <h1>Home Page</h1>} isVisible={currentRoute === '/'} />
<Route path="/about" component={() => <h1>About Page</h1>} isVisible={currentRoute === '/about'} />
</div>
);
}
export default Router;
ãã®ç°¡ç¥åãããäŸã§ã¯ããŠãŒã¶ãŒãããŒã ããŒãžããã¢ããŠãããŒãžã«ããã²ãŒããããšããããŒã ããŒãžã衚瀺ãããŠããéã«ã¢ããŠãããŒãžãããã¯ã°ã©ãŠã³ãã§äºåã¬ã³ããªã³ã°ãããŸããã¢ããŠãããŒãžã®æºåãæŽããšãã¹ã ãŒãºã«è¡šç€ºã«ç§»è¡ããŸãããã®æè¡ã¯ãã¢ããªã±ãŒã·ã§ã³ã®äœæããã©ãŒãã³ã¹ãå€§å¹ ã«åäžãããããšãã§ããŸãã
3. è€éãªã³ã³ããŒãã³ãã®æé©å
è€éãªã¬ã³ããªã³ã°ããžãã¯ãéãèšç®ã䌎ãã³ã³ããŒãã³ãã®å Žåãexperimental_Offscreenã䜿çšããŠãã³ã³ããŒãã³ããå¿
èŠã«ãªããŸã§ã¬ã³ããªã³ã°ãé
å»¶ãããããšãã§ããŸããããã«ãããã¢ããªã±ãŒã·ã§ã³ã®åæããŒãæéãæ¹åããã¡ã€ã³ã¹ã¬ããããããã¯ãããã®ãé²ãããšãã§ããŸãã
import React, { useState, useEffect } from 'react';
import { unstable_Offscreen as Offscreen } from 'react';
function ComplexComponent() {
const [data, setData] = useState(null);
useEffect(() => {
// Simulate fetching data
setTimeout(() => {
setData({ message: 'Data loaded!' });
}, 2000);
}, []);
if (!data) {
return <p>Loading...</p>;
}
return <p>{data.message}</p>;
}
function App() {
const [showComponent, setShowComponent] = useState(false);
return (
<div>
<button onClick={() => setShowComponent(true)}>Show Complex Component</button>
<Offscreen mode={showComponent ? 'visible' : 'hidden'}>
<ComplexComponent />
</Offscreen>
</div>
);
}
export default App;
ãã®äŸã§ã¯ãComplexComponentã¯ãŠãŒã¶ãŒããè€éãªã³ã³ããŒãã³ãã衚瀺ããã¿ã³ãã¯ãªãã¯ãããšãã«ã®ã¿ã¬ã³ããªã³ã°ãããŸãããã以åã¯ããã¯ã°ã©ãŠã³ãã§ã¬ã³ããªã³ã°ãããã¢ããªã±ãŒã·ã§ã³ã®æ®ãã®éšåãè¿
éã«ããŒããããããã«ãªã£ãŠããŸããããã¯ãç¹å®ã®ã³ã³ããŒãã³ããå€éšããŒã¿ãèšç®ã«äŸåããŠãããããããªããã°åæããŒãžã®ã¬ã³ããªã³ã°ãé
å»¶ããå¯èœæ§ãããå Žåã«æçã§ãã
React experimental_Offscreenã䜿çšããå©ç¹
Reactã®experimental_Offscreenã䜿çšããå©ç¹ã¯æ°å€ããããŸãïŒ
- ããã©ãŒãã³ã¹ã®åäžïŒ ããã¯ã°ã©ãŠã³ãã§ã³ã³ããŒãã³ããäºåã¬ã³ããªã³ã°ããããšã§ãç»é¢ã«è¡šç€ºããããŸã§ã®æéãççž®ããããé«éã§ã¬ã¹ãã³ã·ããªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãå®çŸã§ããŸãã
- ã¹ã ãŒãºãªãã©ã³ãžã·ã§ã³ïŒ
experimental_Offscreenã¯ãçŸåšã®ç»é¢ã衚瀺ãããŠããéã«æ¬¡ã®ç»é¢ãäºåã¬ã³ããªã³ã°ããããšã§ãã«ãŒããã³ã³ããŒãã³ãéã®ã¹ã ãŒãºãªãã©ã³ãžã·ã§ã³ãå¯èœã«ããŸãã - åæããŒãæéã®æé©åïŒ éèŠã§ãªãã³ã³ãã³ãã®ã¬ã³ããªã³ã°ãé å»¶ãããããšã§ãã¢ããªã±ãŒã·ã§ã³ã®åæããŒãæéãæ¹åããã€ã³ã¿ãŒãããæ¥ç¶ãé ããŠãŒã¶ãŒã«ãšã£ãŠããã¢ã¯ã»ã¹ãããããªããŸãã
- ããè¯ããªãœãŒã¹ç®¡çïŒ ã³ã³ããŒãã³ãããã€ã¬ã³ããªã³ã°ãããåç¶ããããå¶åŸ¡ããããšã§ããªãœãŒã¹äœ¿çšéãæé©åããäžèŠãªã¬ã³ããªã³ã°ãé²ããã¢ããªã±ãŒã·ã§ã³å šäœã®ããã©ãŒãã³ã¹ãåäžãããããšãã§ããŸãã
èæ ®äºé ãšãã¹ããã©ã¯ãã£ã¹
experimental_Offscreenã¯å€§ããªå©ç¹ãæäŸããŸãããæ¬¡ã®ç¹ãèæ
®ããããšãéèŠã§ãïŒ
- å®éšçãªæ§è³ªïŒ ååã瀺ãããã«ãAPIã¯ãŸã å®éšçã§ããAPIã倿Žãããå¯èœæ§ãããããšãèªèãããããã®å€æŽã«é©å¿ã§ããããã«ããŠãã ããã
- ã¡ã¢ãªäœ¿çšéïŒ ããã¯ã°ã©ãŠã³ãã§ã³ã³ããŒãã³ããäºåã¬ã³ããªã³ã°ãããšãç¹ã«å€§èŠæš¡ãŸãã¯è€éãªã³ã³ããŒãã³ããäºåã¬ã³ããªã³ã°ããå Žåãããå€ãã®ã¡ã¢ãªãæ¶è²»ããå¯èœæ§ããããŸããããã©ãŒãã³ã¹ãšã¡ã¢ãªäœ¿çšéã®ãã¬ãŒããªããæ éã«æ€èšããŠãã ããã
- è€éãïŒ ãªãã¹ã¯ãªãŒã³ã¬ã³ããªã³ã°ãå°å
¥ãããšãã¢ããªã±ãŒã·ã§ã³ãè€éã«ãªãå¯èœæ§ããããŸããå®è£
ãæ
éã«èšç»ãã
experimental_Offscreenã䜿çšããããšã®æå³ãçè§£ããŠããããšã確èªããããšãéèŠã§ãã - ãã¹ãïŒ
experimental_OffscreenãæåŸ ã©ããã«æ©èœããŠãããäºæããªãå¯äœçšãåŒãèµ·ãããŠããªãããšã確èªããããã«ãã¢ããªã±ãŒã·ã§ã³ã培åºçã«ãã¹ãããŠãã ããã
ãã¹ããã©ã¯ãã£ã¹
- éžæçã«äœ¿çšããïŒ ã¢ããªã±ãŒã·ã§ã³ã®ãã¹ãŠã®ã³ã³ããŒãã³ãã«
experimental_Offscreenã䜿çšããªãã§ãã ãããããã©ãŒãã³ã¹ã®ããã«ããã¯ãšãªã£ãŠããã³ã³ããŒãã³ãããäºåã¬ã³ããªã³ã°ã®æ©æµãåããããšãã§ããã³ã³ããŒãã³ãã«çŠç¹ãåœãŠãŠãã ããã - ããã©ãŒãã³ã¹ã枬å®ããïŒ
experimental_Offscreenãå®è£ ããååŸã§ã¢ããªã±ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹ã枬å®ããå®éã«ããã©ãŒãã³ã¹ãåäžããŠããããšã確èªããŠãã ãããChrome DevToolsã®ããã©ãŒãã³ã¹ããã«ãªã©ã®ããŒã«ã䜿çšããŠãã¬ã³ããªã³ã°æéãåæããæœåšçãªããã«ããã¯ãç¹å®ããŸãã - ã¡ã¢ãªäœ¿çšéãç£èŠããïŒ ããã¯ã°ã©ãŠã³ãã§ã®ã³ã³ããŒãã³ãã®äºåã¬ã³ããªã³ã°ãã¡ã¢ãªåé¡ãåŒãèµ·ãããŠããªãããšã確èªããããã«ãã¢ããªã±ãŒã·ã§ã³ã®ã¡ã¢ãªäœ¿çšéãç£èŠããŠãã ããã
- ã³ãŒããææžåããïŒ ãªã
experimental_Offscreenã䜿çšããŠããã®ãããããŠãããã©ã®ããã«æ©èœããŠããã®ãã説æããããã«ãã³ãŒããæç¢ºã«ææžåããŠãã ãããããã¯ãä»ã®éçºè ãããªãã®ã³ãŒããçè§£ããä¿å®ããããããã®ã«åœ¹ç«ã¡ãŸãã
React Suspenseãšã®çµ±å
experimental_Offscreenã¯React Suspenseãšã·ãŒã ã¬ã¹ã«çµ±åããŠããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãããã«åäžãããããšãã§ããŸããSuspenseã䜿çšãããšãããŒã¿ããªãœãŒã¹ã®èªã¿èŸŒã¿ãåŸ
ã£ãŠããéãã³ã³ããŒãã³ãã®ã¬ã³ããªã³ã°ããäžæãã§ããŸããexperimental_Offscreenãšçµã¿åãããããšã§ãããŒã¿åŸ
æ©äžã«ã³ã³ããŒãã³ããããã¯ã°ã©ãŠã³ãã§äºåã¬ã³ããªã³ã°ããããŒã¿ãèªã¿èŸŒãŸãããç»é¢ã«è¡šç€ºããããšãã§ããŸãã
import React, { Suspense } from 'react';
import { unstable_Offscreen as Offscreen } from 'react';
const fetchData = () => {
return new Promise((resolve) => {
setTimeout(() => {
resolve({ message: 'Data loaded!' });
}, 2000);
});
};
const Resource = () => {
const [data, setData] = React.useState(null);
React.useEffect(() => {
fetchData().then(setData);
}, []);
if (!data) {
throw new Promise((resolve) => setTimeout(resolve, 2000)); // Simulate suspense
}
return <p>{data.message}</p>;
};
function App() {
return (
<div>
<Suspense fallback=<p>Loading...</p>>
<Offscreen mode="visible">
<Resource />
</Offscreen>
</Suspense>
</div>
);
}
export default App;
ãã®äŸã§ã¯ãResourceã³ã³ããŒãã³ãã¯Suspenseã䜿çšããŠããŒã¿ã®èªã¿èŸŒã¿ãåŠçããŸãã<Offscreen>ã³ã³ããŒãã³ãã¯ãResourceã³ã³ããŒãã³ããããŒã¿åŸ
æ©äžã«ããã¯ã°ã©ãŠã³ãã§äºåã¬ã³ããªã³ã°ãããããšãä¿èšŒããŸããããŒã¿ãèªã¿èŸŒãŸãããšãã³ã³ããŒãã³ãã¯ã¹ã ãŒãºã«ç»é¢ã«è¡šç€ºãããã·ãŒã ã¬ã¹ãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãæäŸããŸãã
ã°ããŒãã«ãªã¢ã¯ã»ã·ããªãã£ã«é¢ããèæ ®äºé
experimental_Offscreenãå®è£
ããéã«ã¯ãèœåãå Žæã«é¢ããã誰ããã¢ããªã±ãŒã·ã§ã³ã䜿çšã§ããããã«ãã°ããŒãã«ãªã¢ã¯ã»ã·ããªãã£ã¬ã€ãã©ã€ã³ãèæ
®ããããšãéèŠã§ãã
- ããŒããŒãããã²ãŒã·ã§ã³ïŒ
<Offscreen>èŠçŽ å ã®ãã¹ãŠã®ã³ã³ããŒãã³ããããŒããŒãããã²ãŒã·ã§ã³ã§ã¢ã¯ã»ã¹ã§ããããšã確èªããŠãã ãããã³ã³ããŒãã³ããé衚瀺ã®å ŽåãããŒããŒãããã²ãŒã·ã§ã³ã®ãããŒã劚ããªãããã«ããŠãã ããã - ã¹ã¯ãªãŒã³ãªãŒããŒã®äºææ§ïŒ ã¹ã¯ãªãŒã³ãªãŒããŒã§ã¢ããªã±ãŒã·ã§ã³ããã¹ããããªãã¹ã¯ãªãŒã³ã§ã¬ã³ããªã³ã°ãããã³ã³ãã³ãã衚瀺ãããããã«ãªã£ããšãã«æ£ããèªã¿äžããããããšã確èªããŠãã ãããé©åãªARIA屿§ã䜿çšããŠãã³ã³ããã¹ããšæå³æ å ±ãæäŸããŸãã
- ããŒã«ãªãŒãŒã·ã§ã³ïŒ ã¢ããªã±ãŒã·ã§ã³ãè€æ°ã®èšèªããµããŒãããŠããå Žåããªãã¹ã¯ãªãŒã³ã§ã¬ã³ããªã³ã°ãããã³ã³ãã³ãããã¹ãŠã®èšèªã§æ£ããããŒã«ã©ã€ãºããã衚瀺ãããããšã確èªããŠãã ããã
- ã¿ã€ã ãŸãŒã³ïŒ æéã«ææãªæ å ±ã衚瀺ããã³ã³ãã³ããäºåã¬ã³ããªã³ã°ããå Žåãæ å ±ãæ£ç¢ºã§é¢é£æ§ãããããšãä¿èšŒããããã«ããŠãŒã¶ãŒã®ã¿ã€ã ãŸãŒã³ãèæ ®ããŠãã ããã
- æåçãªé æ ®ïŒ ç»åãããã¹ãããŸãã¯ã·ã³ãã«ãå«ãã³ã³ãã³ããäºåã¬ã³ããªã³ã°ããéã«ã¯ãæåçãªéãã«æ³šæããŠãã ãããã³ã³ãã³ããç°ãªãæåã«å¯ŸããŠé©åã§æ¬æãæã£ããã®ã§ããããšã確èªããŠãã ããã
React experimental_Offscreenã®ä»£æ¿ææ®µ
experimental_Offscreenã¯ããã©ãŒãã³ã¹ãæé©åãã匷åãªæ¹æ³ãæäŸããŸãããæ€èšã§ããä»ã®æè¡ããããŸãïŒ
- ã³ãŒãåå²ïŒ ã³ãŒãåå²ã¯ãã¢ããªã±ãŒã·ã§ã³ããªã³ããã³ãã§èªã¿èŸŒãããšãã§ããå°ããªãã£ã³ã¯ã«åå²ããããšãå«ã¿ãŸããããã«ãããã¢ããªã±ãŒã·ã§ã³ã®åæããŒãæéãå€§å¹ ã«ççž®ããå šäœçãªããã©ãŒãã³ã¹ãåäžãããããšãã§ããŸãã
- é å»¶èªã¿èŸŒã¿ïŒ é å»¶èªã¿èŸŒã¿ã¯ãã³ã³ããŒãã³ãããªãœãŒã¹ãå¿ èŠã«ãªã£ããšãã«ã®ã¿èªã¿èŸŒãããšãå«ã¿ãŸããããã«ãããæåã«èªã¿èŸŒãå¿ èŠãããããŒã¿éãæžãããã¢ããªã±ãŒã·ã§ã³ã®åæããŒãæéãæ¹åã§ããŸãã
- ã¡ã¢åïŒ ã¡ã¢åã¯ãé«ã³ã¹ããªé¢æ°åŒã³åºãã®çµæããã£ãã·ã¥ããåãå ¥åãåã³æäŸããããšãã«åå©çšããããšãå«ã¿ãŸããããã«ãããã³ã³ããŒãã³ãã®ã¬ã³ããªã³ã°ã«ãããæéãççž®ã§ããŸãã
- ä»®æ³åïŒ ä»®æ³åã¯ã倧ããªãªã¹ããããŒãã«ã®è¡šç€ºå¯èœãªéšåã®ã¿ãã¬ã³ããªã³ã°ããããšãå«ã¿ãŸããããã«ããã倧éã®ããŒã¿ã衚瀺ããã¢ããªã±ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹ãå€§å¹ ã«åäžãããããšãã§ããŸãã
çµè«
Reactã®experimental_Offscreenã¯ãReactã¢ããªã±ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹ãæé©åããããã®åŒ·åãªããŒã«ã§ãããªãã¹ã¯ãªãŒã³ã¬ã³ããªã³ã°ãæå¹ã«ããããšã§ãããã¯ã°ã©ãŠã³ãã§ã³ã³ãã³ããäºåã¬ã³ããªã³ã°ãããã©ã³ãžã·ã§ã³ãæ¹åããåæããŒãæéãæé©åã§ããŸããããããããããŸã å®éšçãªAPIã§ãããæ³šæããŠäœ¿çšããå¿
èŠãããããšãèŠããŠããããšãéèŠã§ããåžžã«ããã©ãŒãã³ã¹ãžã®åœ±é¿ã枬å®ããã¢ã¯ã»ã·ããªãã£ãèæ
®ããŠãçã«ã°ããŒãã«ã§å
æ¬çãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãäœæããŠãã ããããããã®ãšããµã€ãã£ã³ã°ãªæ©èœãæ¢çŽ¢ããŠãReactãããžã§ã¯ãã§æ°ããã¬ãã«ã®ããã©ãŒãã³ã¹ãè§£ãæŸã¡ãäžçäžã®ãŠãŒã¶ãŒã«åè¶ããäœéšãæäŸããŸãããã
experimental_Offscreenãã©ã®ããã«æ©èœããããçè§£ãããã¹ããã©ã¯ãã£ã¹ã«åŸãããšã§ããã®åãæŽ»çšããŠãäžçäžã®ãŠãŒã¶ãŒã®ããã«ããéããããã¹ã ãŒãºã§ãããã¬ã¹ãã³ã·ããªReactã¢ããªã±ãŒã·ã§ã³ãäœæã§ããŸãã